<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的故事一直持续到老 💕</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #ff6b6b 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 420px;
            margin: 0 auto;
            padding: 15px;
        }
        
        .header {
            text-align: center;
            color: white;
            margin-bottom: 25px;
            animation: fadeInDown 1s ease-out;
        }
        
        .header h1 {
            font-size: 2.2em;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .header .subtitle {
            font-size: 1em;
            opacity: 0.9;
            line-height: 1.4;
        }
        
        .timeline {
            position: relative;
            padding: 15px 0;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 25px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, 
                #ff6b6b 0%, #feca57 8%, #48dbfb 16%, 
                #ff9ff3 24%, #54a0ff 32%, #5f27cd 40%, 
                #00d2d3 48%, #ff6b6b 56%, #feca57 64%, 
                #48dbfb 72%, #ff9ff3 80%, #54a0ff 88%, 
                #5f27cd 96%, #00d2d3 100%);
            border-radius: 2px;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-left: 65px;
            animation: slideInRight 0.8s ease-out;
        }
        
        .timeline-item:nth-child(1) { animation-delay: 0.1s; animation-fill-mode: both; }
        .timeline-item:nth-child(2) { animation-delay: 0.15s; animation-fill-mode: both; }
        .timeline-item:nth-child(3) { animation-delay: 0.2s; animation-fill-mode: both; }
        .timeline-item:nth-child(4) { animation-delay: 0.25s; animation-fill-mode: both; }
        .timeline-item:nth-child(5) { animation-delay: 0.3s; animation-fill-mode: both; }
        .timeline-item:nth-child(6) { animation-delay: 0.35s; animation-fill-mode: both; }
        .timeline-item:nth-child(7) { animation-delay: 0.4s; animation-fill-mode: both; }
        .timeline-item:nth-child(8) { animation-delay: 0.45s; animation-fill-mode: both; }
        .timeline-item:nth-child(9) { animation-delay: 0.5s; animation-fill-mode: both; }
        .timeline-item:nth-child(10) { animation-delay: 0.55s; animation-fill-mode: both; }
        .timeline-item:nth-child(11) { animation-delay: 0.6s; animation-fill-mode: both; }
        .timeline-item:nth-child(12) { animation-delay: 0.65s; animation-fill-mode: both; }
        .timeline-item:nth-child(13) { animation-delay: 0.7s; animation-fill-mode: both; }
        .timeline-item:nth-child(14) { animation-delay: 0.75s; animation-fill-mode: both; }
        .timeline-item:nth-child(15) { animation-delay: 0.8s; animation-fill-mode: both; }
        .timeline-item:nth-child(16) { animation-delay: 0.85s; animation-fill-mode: both; }
        
        .timeline-dot {
            position: absolute;
            left: -41px;
            top: 8px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            animation: pulse 3s infinite;
        }
        
        .timeline-dot.first-meet { background: #ff6b6b; }
        .timeline-dot.contact { background: #feca57; }
        .timeline-dot.turning-point { background: #48dbfb; }
        .timeline-dot.action { background: #ff9ff3; }
        .timeline-dot.breakfast { background: #54a0ff; }
        .timeline-dot.qufu { background: #5f27cd; }
        .timeline-dot.pandemic { background: #00d2d3; }
        .timeline-dot.job-hunting { background: #ff6b6b; }
        .timeline-dot.graduation { background: #feca57; }
        .timeline-dot.dating { background: #48dbfb; }
        .timeline-dot.weekly-visits { background: #ff9ff3; }
        .timeline-dot.family-visits { background: #54a0ff; }
        .timeline-dot.my-family { background: #5f27cd; }
        .timeline-dot.yizhuang-move { background: #00d2d3; }
        .timeline-dot.together { background: #ff6b6b; }
        .timeline-dot.now { background: #feca57; }
        
        .timeline-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
            border-left: 4px solid transparent;
        }
        
        .timeline-card:hover {
            transform: translateY(-3px);
        }
        
        .timeline-card.highlight {
            border-left-color: #ff6b6b;
            background: rgba(255, 245, 245, 0.98);
        }
        
        .timeline-card.special {
            border-left-color: #5f27cd;
            background: rgba(245, 245, 255, 0.98);
        }
        
        .timeline-date {
            font-size: 0.85em;
            color: #666;
            margin-bottom: 6px;
            font-weight: bold;
        }
        
        .timeline-title {
            font-size: 1.2em;
            color: #333;
            margin-bottom: 8px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .timeline-content {
            color: #555;
            line-height: 1.5;
            font-size: 0.95em;
        }
        
        .timeline-emoji {
            font-size: 1.3em;
            margin-right: 6px;
        }
        
        .love-stats {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            margin: 25px 0;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            animation: fadeInUp 1s ease-out 1.2s both;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 1.8em;
            font-weight: bold;
            color: #ff6b6b;
            margin-bottom: 3px;
        }
        
        .stat-label {
            color: #666;
            font-size: 0.9em;
        }
        
        .message-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 22px;
            text-align: center;
            margin: 25px 0;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            animation: fadeInUp 1s ease-out 1.4s both;
        }
        
        .message-text {
            font-size: 1.1em;
            color: #555;
            line-height: 1.7;
            margin-bottom: 18px;
        }
        
        .highlight {
            color: #ff6b6b;
            font-weight: bold;
        }
        
        .btn-group {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
            color: white;
            padding: 10px 18px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.85em;
            font-weight: bold;
            box-shadow: 0 3px 12px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 18px rgba(255, 107, 107, 0.4);
        }
        
        .floating-hearts {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .floating-heart {
            position: absolute;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            animation: float 10s ease-in-out infinite;
        }
        
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(40px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(25px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        
        @keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-80px) rotate(360deg); opacity: 0; }
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .container { padding: 12px; }
            .header h1 { font-size: 1.9em; }
            .timeline-item { padding-left: 55px; }
            .stat-number { font-size: 1.5em; }
        }
    </style>
</head>
<body>
    <div class="floating-hearts" id="floatingHearts"></div>
    
    <div class="container">
        <div class="header">
            <h1>我们的历程</h1>
            <div class="subtitle">从公交卡的初识到亦庄的每天相伴<br>七年相伴，每一个瞬间都是最珍贵的回忆</div>
        </div>
        
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-dot first-meet"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2018年9月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🚌</span>初识·公交卡的缘分
                    </div>
                    <div class="timeline-content">
                        那个秋日，因为办理公交卡而初次相遇。也许是命运的安排，在那个平凡的瞬间，心中悄悄种下了一颗种子，暗生情愫。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot contact"></div>
                <div class="timeline-card">
                    <div class="timeline-date">2018年11月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🔬</span>接触·实验室的小心机
                    </div>
                    <div class="timeline-content">
                        开始在实验室制造各种"偶然"的见面机会。虽然吃了无数次莫名的醋，但是每一次的相遇都让心跳加速，每一次的对话都让彼此更加了解。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot turning-point"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2019年3月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🌸</span>转机·春天的项目合作
                    </div>
                    <div class="timeline-content">
                        春暖花开的季节，实验室项目让我们有了更多合作的机会。工作上的绑定也慢慢变成了心灵上的依靠。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot action"></div>
                <div class="timeline-card">
                    <div class="timeline-date">2019年6月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">📚</span>行动·自习室的陪伴
                    </div>
                    <div class="timeline-content">
                        找实习的日子里，我们一起在自习室学习。那些并肩奋斗的夜晚，是青春里最美好的时光。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot breakfast"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2019年8月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🥐</span>创造·早餐的温暖
                    </div>
                    <div class="timeline-content">
                        实习期间，早上借口送早餐和你一块结伴出发去实习。那份执着和坚持，终于让心意慢慢传达，也让我底气越来越足。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot qufu"></div>
                <div class="timeline-card special">
                    <div class="timeline-date">2019年10月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🚄</span>死皮赖脸·偷偷跑去曲阜
                    </div>
                    <div class="timeline-content">
                        那个国庆假期，做了一个"唐突"的决定——偷偷跑去曲阜见你。那份勇敢和冲动，也是给我心里积极暗示，开始顺理成章的死皮赖脸。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot pandemic"></div>
                <div class="timeline-card">
                    <div class="timeline-date">2020年1-5月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">📱</span>疫情·远程的牵挂
                    </div>
                    <div class="timeline-content">
                        疫情期间的远程联系，有甜蜜也有矛盾。距离让我们更加珍惜彼此，也让感情经历了考验和成长。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot job-hunting"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2020年7-10月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">💼</span>并肩作战·找工作的日子
                    </div>
                    <div class="timeline-content">
                        一起找工作的那段时光，互相鼓励，互相支持。共同的目标让我们的情感羁绊更加深厚。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot graduation"></div>
                <div class="timeline-card">
                    <div class="timeline-date">2020年12月-2021年</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🎓</span>毕业准备·最后的校园时光
                    </div>
                    <div class="timeline-content">
                        毕业准备的忙碌日子之余，每周末出去玩耍、看遍电影享受校园生活最后的美好。即将告别校园，但我们的故事才刚刚开始。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot dating"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2021年7月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">☕</span>工作初期·咖啡厅、商场的约会
                    </div>
                    <div class="timeline-content">
                        工作后的约会，在温馨的咖啡厅里。咖啡的香气伴随工作学习，见证了我们关系的进一步升华。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot weekly-visits"></div>
                <div class="timeline-card special">
                    <div class="timeline-date">2022年</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🏠</span>每周的约定·安稳平静的日子
                    </div>
                    <div class="timeline-content">
                        每周去你的住处找你，偶尔一起做饭，看看电视剧。那些安稳平静的日子虽然不是充满激情，但是我更享受细水长流的美好。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot family-visits"></div>
                <div class="timeline-card">
                    <div class="timeline-date">2022年</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🚗</span>约定俗成·放假跟着你回家
                    </div>
                    <div class="timeline-content">
                        每个假期都跟着你回家，慢慢被接受。慢慢融入你的家。那种被接纳和包容的温暖。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot my-family"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2023年7月</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🏡</span>心里的满足·第一次去我家
                    </div>
                    <div class="timeline-content">
                        第一次带你回我家，家里人都很喜欢你，虽然不善于表达。有种美梦成真的感觉。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot yizhuang-move"></div>
                <div class="timeline-card special">
                    <div class="timeline-date">2024年</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🚇</span>更远的距离更多的相处·你搬到亦庄
                    </div>
                    <div class="timeline-content">
                        你搬到亦庄来了！每周五来亦庄，周一回公司。这样的安排让我们有了更多独立相处的时间，感情也更加深厚。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot together"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2025年</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">💕</span>我也来亦庄·每天都在一块
                    </div>
                    <div class="timeline-content">
                        我也来亦庄了！现在我们可以每天都在一起。从类似异地到同城，从周末到每天。做做饭，看看电影感受生活的点滴。
                    </div>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot now"></div>
                <div class="timeline-card highlight">
                    <div class="timeline-date">2025年情人节</div>
                    <div class="timeline-title">
                        <span class="timeline-emoji">🌹</span>今天·我依然还是原来的初心
                    </div>
                    <div class="timeline-content">
                        从公交卡的第一眼到现在每天待一块，我们走过了七年的美好时光。感谢你一直在我身边，让每一天都充满意义和幸福。我很固执，有很多缺点，我会好好改掉陋习一步步成为让你仰望的人。
                    </div>
                </div>
            </div>
        </div>
        
        <div class="love-stats">
            <div style="font-size: 1.1em; color: #666; margin-bottom: 10px;">我们的相遇数据</div>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number" id="daysCounter">0</div>
                    <div class="stat-label">相遇天数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">15</div>
                    <div class="stat-label">重要时刻</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="yearsCounter">0</div>
                    <div class="stat-label">相伴年数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">∞</div>
                    <div class="stat-label">未来岁月</div>
                </div>
            </div>
        </div>
        
        <div class="message-card">
            <div class="message-text">
                从办公交卡第一眼开始，<br>
                <span class="highlight">你就成了我生命中最重要的人</span><br><br>
                从实验室的青涩到偷偷跑去曲阜的死皮赖脸，<br>
                从每周的约定到亦庄的每天见面，<br>
                <span class="highlight">感谢你陪我走过求学、工作、成长的每一个阶段</span><br><br>
                <span class="highlight">情人节快乐，My Queen 💕</span><br>
                <span class="highlight">我会更加努力，变得更加优秀。努力成为让你欣赏的人</span>
            </div>
            
            <div class="btn-group">
                <a href="tel:" class="btn">💕 给你打电话</a>
                <a href="sms:" class="btn">💌 发个消息</a>
                <a href="#" class="btn" onclick="shareStory()">📤 分享故事</a>
            </div>
        </div>
    </div>

    <script>
        // 计算相爱天数（从2019年8月1日开始计算）
        function calculateStats() {
            const startDate = new Date('2019-03-14');
            const today = new Date();
            const timeDiff = today.getTime() - startDate.getTime();
            const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
            const yearsDiff = Math.floor(daysDiff / 365);
            
            // 动画显示天数
            let currentDays = 0;
            let currentYears = 0;
            const daysIncrement = Math.ceil(daysDiff / 60);
            const daysCounter = document.getElementById('daysCounter');
            const yearsCounter = document.getElementById('yearsCounter');
            
            const timer = setInterval(() => {
                currentDays += daysIncrement;
                if (currentDays >= daysDiff) {
                    currentDays = daysDiff;
                    clearInterval(timer);
                }
                daysCounter.textContent = currentDays;
                
                currentYears = Math.floor(currentDays / 365);
                yearsCounter.textContent = currentYears;
            }, 40);
        }
        
        // 创建飘落的爱心
        function createFloatingHeart() {
            const hearts = ['💕', '💖', '💗', '💝', '💘', '🌸', '🌺', '🚄', '🏠'];
            const heart = document.createElement('div');
            heart.className = 'floating-heart';
            heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)];
            heart.style.left = Math.random() * 100 + '%';
            heart.style.animationDelay = Math.random() * 4 + 's';
            heart.style.animationDuration = (Math.random() * 5 + 8) + 's';
            
            document.getElementById('floatingHearts').appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 13000);
        }
        
        // 分享故事
        function shareStory() {
            if (navigator.share) {
                navigator.share({
                    title: '我做的确实不够好',
                    text: '从公交卡的初识到亦庄的相伴，这是我们七年的时间轴，很抱歉没有给你的都是平淡如水的陪伴，接下来的日子我能做的更好 💕',
                    url: window.location.href
                });
            } else {
                // 复制链接到剪贴板
                navigator.clipboard.writeText(window.location.href).then(() => {
                    alert('链接已复制到剪贴板！');
                });
            }
        }
        
        // 页面加载完成后执行
        window.addEventListener('load', () => {
            calculateStats();
            
            // 定期创建飘落的爱心
            setInterval(createFloatingHeart, 2500);
            
            // 初始创建几个爱心
            for(let i = 0; i < 5; i++) {
                setTimeout(createFloatingHeart, i * 600);
            }
        });
        
        // 点击页面时创建爱心特效
        document.addEventListener('click', function(e) {
            const hearts = ['💖', '💕', '💗', '💝', '🚄', '🏠'];
            const heart = document.createElement('div');
            heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)];
            heart.style.position = 'fixed';
            heart.style.left = e.clientX + 'px';
            heart.style.top = e.clientY + 'px';
            heart.style.fontSize = '20px';
            heart.style.pointerEvents = 'none';
            heart.style.zIndex = '1000';
            heart.style.color = '#ff6b6b';
            heart.style.animation = 'fadeInUp 1.8s ease-out forwards';
            
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 1800);
        });
    </script>
</body>
</html>